<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0, user-scalable=yes, viewport-fit=cover" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title>识别详情</title>
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/iconfont.css" />
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/jquery-1.4.2.min.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
				touch-action: none;
			}
			
			body {
				color: #fff;
				background: #000000;
			}
			
			.iconfont {
				font-size: 14vw;
			}
			
			.head {
				color: #007AFF;
				width: 100vw;
				height: 6vh;
				float: left;
				background: #000000;
				font-size: 6vw;
				line-height: 6vh;
				text-align: center;
				position: fixed;
				z-index: 99;
				box-shadow:inset 0 0 10px #0f0;
				border: #007AFF 1px solid;
				
			}
			.image {
				margin-top:6vh;
				position: absolute;
			}
			.image img{
				
				width: 94vw;
				height: 30vh;
				margin: 3vw;
				border: #fff 1vw solid;
				border-radius: 3vw;
			}
			.content{
				
				overflow: auto;
				height: 50vh;
				width: 94vw;
				margin:0 3vw;
				border-radius: 2vw;
				background: #FFFFFF;
				color: #000000;
				padding: 2vw;
				margin-top: 40vh;
				position: absolute;
			}
			.title{
				font-size: 5vw;
			}
			.message{
				
				text-indent: 2em;
				text-align: left;
				margin-top: 2vw;
				color: #8F8F94;
				font-size: 4vw;
			}
			.floot{
				z-index: 999;
				flex: auto;
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100vw;
				height: 12vw;
				background: #000;
				border-top: #FFFFFF 1px solid;
			}
			.floot li{
				list-style-type: none;
				-moz-box-sizing: border-box;
				border: #323232 1px solid;
			}
			</style>
		<script type="text/javascript" src="../js/common.js"></script>
	</head>
	<body style="text-align:center;">
		<header class="mui-bar mui-bar-nav" style="background-color: #000000; ">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" style="color: #FFFFFF;">详情</h1>
		</header>
		<div class="image" id="">
			<img id="img" src="../../images/nickname.png"/>
		</div>
		<div class="content">
			<div id="title" class="title">哈士奇</div>
			<div class="message"></div>
		</div>
		<div class="floot">
			<div class="mui-row">
				<div class="mui-col-sm-12 mui-col-xs-12">
					<li class="mui-table-view-cell recog" id="back">
						<span>
							返回
						</span>
					</li>
				</div>
			</div>
		</div>
		<script>
			mui.plusReady(function() {
			options = {
				scrollY: true, //是否竖向滚动
				scrollX: false, //是否横向滚动
				startX: 0, //初始化时滚动至x
				startY: 0, //初始化时滚动至y
				indicators: true, //是否显示滚动条
				deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
				bounce: true //是否启用回弹
			}
			mui('.mui-scroll-wrapper').scroll({
				deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
			});
			
			var data = JSON.parse(localStorage.getItem("childData"));
			console.log(localStorage.getItem("childData"));
			if(data !=null)
			{
				var imgUrl = data.imagePath;
				console.log(imgUrl)
				 $('#img').attr('src',imgUrl);
				$('#title').html(data.name);
				$('.message').html(data.message);
			}
			var back = document.getElementById("back");
			back.addEventListener('click', function() {
				plus.webview.getWebviewById("recoginition-deail.html").close();
			})
			});
		</script>
	</body>
</html>
